<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="关键词" prop="searchWord">
        <el-input
          v-model="queryParams.keyword"
          placeholder="请输入订单总号、业务单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['dingdan:index:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['dingdan:index:import']"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['dingdan:index:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getPage"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" label="主键" prop="id" v-if="false"/>
      <el-table-column align="center" width="180" label="日期" prop="riqi" />
      <el-table-column align="center" width="180" label="确认日期" prop="qrrq" />
      <el-table-column align="center" width="180" label="订单总号" prop="ddzh" />
      <el-table-column align="center" width="180" label="业务单号" prop="ywdh" />
      <el-table-column align="center" width="180" label="客户名称" prop="khmc" />
      <el-table-column align="center" width="180" label="订单种类" prop="ddzl" />
      <el-table-column align="center" width="180" label="产品种类" prop="cpzl" />
      <el-table-column align="center" width="180" label="印品名称" prop="ypmc" />
      <el-table-column align="center" width="180" label="配套名称" prop="ptmc" />
      <el-table-column align="center" width="180" label="规格" prop="guige" />
      <el-table-column align="center" width="180" label="纸张" prop="zhizhang" />
      <el-table-column align="center" width="180" label="交货时间" prop="jhrq" />
      <el-table-column align="center" width="180" label="交货方式" prop="jhfs" />
      <el-table-column align="center" width="180" label="工艺单号" prop="gydh" />
      <el-table-column align="center" width="180" label="数量" prop="shuliang" />
      <el-table-column align="center" width="180" label="单价" prop="danjia" />
      <el-table-column align="center" width="180" label="金额" prop="jine" />
      <el-table-column align="center" width="180" label="版费" prop="banfei" />
      <el-table-column align="center" width="180" label="版费说明" prop="bfsm" />
      <el-table-column align="center" width="180" label="定金" prop="dingjin" />
      <el-table-column align="center" width="180" label="开票" prop="kaipiao" />
      <el-table-column align="center" width="180" label="制单人" prop="zdr" />
      <el-table-column align="center" width="180" label="外协单位" prop="wxdw" />
      <el-table-column align="center" width="180" label="后工要求" prop="hgyq" />
      <el-table-column align="center" width="180" label="包装要求" prop="bzyq" />
      <el-table-column align="center" width="180" label="客户文件" prop="khwj" />
      <el-table-column align="center" width="180" label="完成状态" prop="wczt" />
      <el-table-column align="center" width="180" label="系列" prop="xilie" />
      <el-table-column align="center" width="180" label="付款方式" prop="fkfs" />
      <el-table-column align="center" width="180" label="大区" prop="daqu" />
      <el-table-column align="center" width="180" label="客服组长" prop="kfzz" />
      <el-table-column align="center" width="180" label="收款金额" prop="skje" />
      <el-table-column align="center" width="180" label="备注" prop="beizhu" />
      <el-table-column align="center" width="180" label="收款日期" prop="skrq" />
      <el-table-column align="center" width="180" label="收款备注" prop="skbz" />
      <el-table-column align="center" width="180" label="渠道类型" prop="qdlx" />
      <el-table-column align="center" width="180" label="完结时间" prop="wjsj" />

      <el-table-column align="center" width="100" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['dingdan:index:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['dingdan:index:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getPage"
    />

    <!-- 添加或修改单表对话框 -->
    <el-dialog :title="model.title" :visible.sync="model.open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-checkbox v-model="form.jiaji">[加急]</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <h1 align="center"><b>业务订单</b></h1>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务总号">
              <el-input v-model="form.ddzh" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="业务员" prop="ywy">
              <el-input v-model="form.ywy" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="部门">
              <el-input v-model="form.bumen" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="客服负责">
              <el-input v-model="form.kfzz" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单种类" prop="ddzl">
              <el-select v-model="form.ddzl" clearable>
                <el-option v-for="dict in dictData.ddzl" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="业务单号">
              <el-input v-model="form.ywdh" />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="border: solid 1px lightgray;border-radius: 5px;margin-bottom: 12px;padding: 15px 15px 0px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="下单时间">
              <el-date-picker clearable size="small"
                          v-model="form.riqi"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交货时间">
              <el-date-picker clearable size="small"
                          v-model="form.jhrq"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户文件" prop="khwj">
              <el-select v-model="form.khwj" clearable>
                <el-option v-for="dict in dictData.khwj" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工艺单号">
              <el-input v-model="form.gydh" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="khmc">
              <el-input v-model="form.khmc" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客户代码X">
              <el-input v-model="form.khdm" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="联系人X">
              <el-input v-model="form.khlxr" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="电话X">
              <el-input v-model="form.khdh" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="客户地址X">
              <el-input v-model="form.khdz" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="大区">
              <el-input v-model="form.daqu" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="产品种类">
              <el-select v-model="form.cpzl" clearable>
                <el-option v-for="dict in dictData.cpzl" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="盒型">
              <el-select v-model="form.hexing" clearable>
                <el-option v-for="dict in dictData.hexing" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="材质类型S" prop="czlx">
              <el-select v-model="form.czlx" clearable>
                <el-option v-for="dict in dictData.czlx" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="印品名称">
              <el-input v-model="form.ypmc" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <el-form-item label="规格"></el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="长X">
              <el-input v-model="form.chang" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="宽X">
              <el-input v-model="form.kuan" />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="高X">
              <el-input v-model="form.gao" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input v-model="form.guige" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="配套名称S">
              <el-select v-model="form.ptmc" clearable>
                <el-option v-for="dict in dictData.ptmc" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="材质S" prop="caizhi">
              <el-select v-model="form.caizhi" clearable>
                <el-option v-for="dict in dictData.caizhi" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="数量" prop="shuliang">
              <el-input v-model="form.shuliang" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-checkbox v-model="form.slzg">数量足够</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3">
            <el-form-item label="结算"></el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="单价" prop="danjia">
              <el-input-number v-model="form.danjia" :precision="2" style="width: 120px" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="金额">
              <el-input v-model="form.jine" :precision="2" style="width: 120px" />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="运费S">
              <el-select v-model="form.yunfei" clearable>
                <el-option v-for="dict in dictData.yunfei" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="开票S">
               <el-select v-model="form.kaipiao" clearable>
                <el-option v-for="dict in dictData.kaipiao" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="版费">
              <el-input v-model="form.banfei" :precision="2" style="width: 120px" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="付定金">
              <el-input v-model="form.dingjin" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="交货方式S">
              <el-select v-model="form.jhfs" clearable>
                <el-option v-for="dict in dictData.jhfs" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款方式S">
              <el-select v-model="form.fkfs" clearable>
                <el-option v-for="dict in dictData.fkfs" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="版费说明S" prop="bfsm">
              <el-select v-model="form.bfsm" clearable>
                <el-option v-for="dict in dictData.bfsm" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="定金账户S" prop="djzh">
              <el-select v-model="form.djzh" clearable>
                <el-option v-for="dict in dictData.djzh" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产要求S">
              <el-select v-model="form.scyq" clearable>
                <el-option v-for="dict in dictData.scyq" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="颜色">
              <el-select v-model="form.yanse" clearable>
                <el-option v-for="dict in dictData.yanse" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="后工要求">
              <el-input v-model="form.hgyq" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="包装要求">
              <el-input v-model="form.bzyq" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="配套产品X">
            </el-form-item>
            <el-table>
              <el-row>
                <el-col>1</el-col>
                <el-col>2</el-col>
              </el-row>
              <el-row>
                <el-col>21</el-col>
                <el-col>22</el-col>
              </el-row>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="特记事项X">
              <el-input v-model="form.tjsx" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="版类型S">
              <el-select v-model="form.blx" clearable>
                <el-option v-for="dict in dictData.blx" :key="dict" :label="dict" :value="dict" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注">
              <el-input v-model="form.beizhu" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="收货人X">
              <el-input v-model="form.shr" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话X">
              <el-input v-model="form.tel" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货地址X">
              <el-input v-model="form.shdz" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="收货地区X">
              <el-input v-model="form.shdq" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="生产经理X">
              <el-input v-model="form.scjl" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="外协单位">
              <el-input v-model="form.wxdw" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="已发数量X">
              <el-input-number v-model="form.yfsl" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="运费X">
              <el-input v-model="form.qrrq" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提交时间X">
              <el-input v-model="form.tjsj" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="接单X">
              <el-input v-model="form.jiedan" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="下单确认X">
              <el-input v-model="form.xdqr" />
            </el-form-item>
          </el-col>
        </el-row>
        </div>
        
        <el-row>
          <el-col :span="16"><el-form-item></el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="业务审核">
              <el-input v-model="form.shenhe" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageDomain, getDomain, delDomain, saveDomain } from "@/api/shengchan/dingdan";
import { getDictData } from "@/api/shengchan/canshu";
import { getToken } from "@/utils/auth";

export default {
  name: "Dingdan",
  components: {
  },
  data() {
    return {
      //按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      dataList: [],
      // 弹出层标题
      title: "业务订单",
      model: {
        open: false,
        title: ""
      },
      exportUrl: "/dingdan/export",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/dingdan/importData"
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        keyword: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        khmc: [
          { required: true, message: "客户名称不能为空", trigger: "blur" }
        ],
        value: [
          { required: true, message: "值不能为空", trigger: "blur" }
        ],
      },
      dictData: {}
    };
  },
  created() {
    this.getPage();
    this.getDict();
  },
  methods: {
    getDict() {
      this.dictData = {}
      getDictData().then(res => {
        if (res.code === 200) {
          this.dictData = res.data
        }
      })
    },
    /** 自定义分页查询 */
    getPage() {
      this.loading = true;
      this.queryParams.params = {};
      pageDomain(this.queryParams).then(res => {
        this.dataList = res.records;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.model.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.getPage();
    },
    /** 搜索按钮操作 */
    handlePage() {
      this.queryParams.current = 1;
      this.getPage();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.model.open = true;
      this.model.title = "添加" + this.title;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids
      if (!id) {
        this.$modal.msgError("请选中一行进行编辑");
        return
      }
      getDomain(id).then(res => {
        this.loading = false;
        this.form = res.data;
        this.model.open = true;
        this.model.title = "修改" + this.title;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          saveDomain(this.form).then(res => {
            this.$modal.msgSuccess("保存成功");
            this.model.open = false;
            this.getPage();
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除数据项？').then(() => {
        this.loading = true;
        return delDomain(ids);
      }).then(() => {
        this.loading = false;
        this.getPage();
        this.$modal.msgSuccess("删除成功");
      }).finally(() => {
        this.loading = false;
      });
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(this.exportUrl, {
        ...this.queryParams
      }, `${this.title}_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(res, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(res.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getPage();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
};
</script>
